<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 总结
        事件的基本使用：
        1.v-on 和 @ 的用途是一致的 都是绑定事件名
        2.事件的回调需要配置在methods 中不要配置在data中，不然vm会给事件做数据代理平白的浪费资源
        3.methods 里面的方法不可以使用剪头函数 否则this就指向window 
        4.methods 里面的方法都是被vue所管理的 this 指向的也是当前的vm对象或者 组件实例
        5.方法如果有参数并且也要使用$event的话 那么格式需要这么写 showmessage(number,$event)
        showmessage = showmessage($event)
    -->
    <div id="root">
        <h1>现在是琪亚娜时间</h1>
        <button v-on:click="showmessage">芽衣我来啦</button>
        <button @click="showmessage($event)">哒哒哒哒呆鹅</button>
    </div>
</body>
<script>    
    new Vue({
       el:'#root',
       data:{
          
       },
       methods:{
            showmessage(event){
                console.log(event)
            }
       }
    })
</script>
</html>